
  <template>
  <div style="padding:20px; padding-bottom:100px;">
    <div class="btnSearch">
      <el-form :inline="true" label-position="top" class="demo-form-inline">
         <el-form-item label="模糊搜索：">
            <el-input
              v-model="keyword"
              placeholder="请输入关键字搜索"
              style="width: 200px"
              clearable
            />
          </el-form-item>
          <el-form-item label="入学口：">
            <el-select v-model="entranceValue" placeholder="请选择">
              <el-option
                v-for="item in optionsObj.entrance"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="是否在籍：">
            <el-select v-model="ifRegisteredValue" placeholder="请选择">
              <el-option
                v-for="item in optionsObj.if_registered"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="学籍状态：">
            <el-select v-model="collegeStatusValue" placeholder="请选择">
              <el-option
                v-for="item in optionsObj.college_status"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="专业：">
            <el-select v-model="majorValue" placeholder="请选择">
              <el-option
                v-for="item in optionsObj.major"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="年级：">
            <el-select v-model="gradeNowValue" placeholder="请选择">
              <el-option
                v-for="item in optionsObj.grade_now"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="班级：">
            <el-select v-model="administrativeClassValue" placeholder="请选择">
              <el-option
                v-for="item in optionsObj.administrative_class"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label=""> 
            <el-button
              style="margin-top:43px;"
              type="primary"
              icon="el-icon-search"
              @click="selectGraduatesByKeywordBySelect"
              >筛选</el-button>
          </el-form-item>
      </el-form>
    </div>
    <el-table :data="graduatetableData" border center fit height="600" style="width: 100%" v-loading = "isLoading"
        element-loading-text = "数据正在加载中"
        element-loading-spinner = "el-icon-loading">
      <el-table-column
        v-for="(col, index) in graduateTtableLabel"
        :key="index"
        :prop="col.prop"
        :label="col.label"
      />
      <el-table-column prop="handle" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="studentDetail(scope.$index, scope.row)"
            >详细信息</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div v-if="graShow" class="pageList" style="text-align: right">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pagination.num"
        :limit.sync="pagination.size"
        @pagination="selectGraduates"
      />
    </div>
    <div v-if="graByKey" class="pageList" style="text-align: right">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pagination1.num"
        :limit.sync="pagination1.size"
        @pagination="selectGraduatesByKeywordByPagi"
      />
    </div>
    <el-dialog
      :title="'详细信息:' + tableDatas.student_source__name"
      :visible.sync="dialogTableVisible"
      center
      :append-to-body="true"
      :lock-scroll="false"
      width="50%"
    >
      <studentDetail :table-data="tableDatas" />
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import studentDetail from "@/views/studentInfo/studentDetail";
export default {
  components: { Pagination, studentDetail },
    name:'GraInfoManage',
  data() {
    return {
      isLoading:false,
      pagination: {
        size: 15,
        num: 0,
      },
      pagination1: {
        size: 15,
        num: 0,
      },
      valueType: {},
      entrance: [],
      if_registered: [],
      college_status: [],
      major: [],
      grade_now: [],
      administrative_class: [],
      entranceValue: "",
      ifRegisteredValue: "",
      collegeStatusValue: "",
      majorValue: "",
      gradeNowValue: "",
      administrativeClassValue: "",
      columnName: [
        "entrance",
        "if_registered",
        "college_status",
        "major",
        "grade_now",
        "administrative_class",
      ],
      tableNameForOption: [
        "student_source",
        "student_source",
        "student_status_educational",
        "student_status_educational",
        "student_status_educational",
        "student_status_educational",
      ],
      graShow: true,
      graByKey: false,
      test: "1",
      keyword: "",
      idCard: "",
      studentName: "",
      total: 0,
      dialogTableVisible: false,
      graduatesData: [],
      detailDatas: [],
      tableFileds: [],
      tableFiledName: [],
      tableNameInit: ["student_source"],
      tableName: [
        "employee_information",
        "student_source",
        "student_basic_info_student_worker",
        "dormitory_beds",
        "student_status_educational",
        "payment_information",
      ],
      graduateTableFiled: [
        "student_source.name",
        "student_source.id_card",
        "student_source.entrance",
        "student_source.if_registered",
        "student_source.student_registration_number",
        "student_status_educational.college_status",
        "student_status_educational.stu_id",
        "student_status_educational.major",
        "student_status_educational.grade_now",
        "student_status_educational.administrative_class",
      ],
      tableFiled: [],
      graduateTtableLabel: [
        { label: "姓名", prop: "student_source__name" },
        { label: "身份证号", prop: "student_source__id_card" },
        { label: "入学口", prop: "student_source__entrance" },
        { label: "是否在籍", prop: "student_source__if_registered" },
        {
          label: "学籍注册号",
          prop: "student_source__student_registration_number",
        },
        {
          label: "学院学籍",
          prop: "student_status_educational__college_status",
        },
        { label: "学号", prop: "student_status_educational__stu_id" },
        { label: "专业", prop: "student_status_educational__major" },
        { label: "年级", prop: "student_status_educational__grade_now" },
        {
          label: "班级",
          prop: "student_status_educational__administrative_class",
        },
      ],
      tableLabel: [],
      tableData: [],
      graduatetableData: [],
      tableDatas: [],
      optionsObj: {}, //各个下拉框数据集合
    };
  },
  mounted() {
    this.isLoading = true;
    this.selectGraduates();
    this.selectTableData(this.tableName);
    this.getValueType();
  },
  methods: {
    selectGraduates(params1 = {}) {
      this.graByKey = false;
      this.graShow = true;
      params1.pageSize = this.pagination.size;
      params1.pageNum = this.pagination.num;
      var graduateTableFiled = [];
      graduateTableFiled = this.graduateTableFiled;
      var params = JSON.stringify(params1);
      this.$post("dataCenter/selectGraduates", {
        params,
        graduateTableFiled,
      }).then((r) => {
        this.isLoading = false
        const data = r.data.data;
        this.graduatetableData = [];
        for (var i = 0; i < data.length; i++) {
          this.graduatetableData.push(data[i]);
        }
        this.total = r.data.count;
      });
      this.loading = false;
    },
    // 按关键字和筛选按钮搜索毕业生信息
    selectGraduatesByKeywordBySelect(params1 = {}) {
      this.pagination1.num = 1;
      this.selectGraduatesByKeywordByPagi(params1);
    },
    // 按关键字和分页按钮搜索毕业生信息
    selectGraduatesByKeywordByPagi(params1 = {}) {
      this.graShow = false;
      this.graByKey = true;
      params1.pageSize = this.pagination1.size;
      params1.pageNum = (this.pagination1.num - 1) * this.pagination1.size;
      params1.keyword = this.keyword;
      params1.entranceValue = this.entranceValue;
      params1.ifRegisteredValue = this.ifRegisteredValue;
      params1.collegeStatusValue = this.collegeStatusValue;
      params1.majorValue = this.majorValue;
      params1.gradeNowValue = this.gradeNowValue;
      params1.administrativeClassValue = this.administrativeClassValue;
      var params = JSON.stringify(params1)
      var graduateTableFiled = [];
      graduateTableFiled = this.graduateTableFiled;
      this.$post("dataCenter/selectGraduates", {
        params,
        graduateTableFiled,
      }).then((r) => {
        this.graduatetableData = [];
        const data = r.data.data;
        this.graduatetableData = [];
        for (var i = 0; i < data.length; i++) {
          this.graduatetableData.push(data[i]);
        }
        this.total = r.data.count;
      });
      this.loading = false;
    },
    selectTableData(tableName) {
      var baseName = "febs_cloud_base";
      this.$get("dataCenter/selectAllTableField", {
        baseName,
        tableName,
      }).then((r) => {
        const data = r.data.data;
        this.tableData = [];
        for (var i = 0; i < data.length; i++) {
          this.tableData.push({
            value: data[i].COLUMN_NAME,
            label: data[i].column_comment,
          });
          this.tableFileds.push(data[i].COLUMN_NAME);
        }
      });
      this.loading = false;
    },
    studentDetail(index, studentData) {
      var params1 = {};
      var tableFiled = this.tableFileds;
      params1.pageSize = 10;
      params1.pageNum = 0;
      params1.idCard = studentData.student_source__id_card;
      var params = JSON.stringify(params1);
      this.$post("dataCenter/selectCurrency", {
        params,
        tableFiled,
      }).then((r) => {
        const data = r.data.data[0];
        var birthday = this.getBirthdayFromIdCard(
          data.student_basic_info_student_worker__id_card
        );
        var schoolStatus = this.getSchoolStatus(data.student_basic_info_student_worker__status_of_student_status);
        this.tableDatas = data;
        this.tableDatas.student_basic_info_student_worker__birthday = birthday;
        this.tableDatas.student_basic_info_student_worker__status_of_student_status = schoolStatus;
        this.loading = true;
      });
      this.dialogTableVisible = true;
    },
    getBirthdayFromIdCard: function (idCard) {
      var birthday = "";
      if (idCard) {
        if (idCard !== null && idCard !== "") {
          if (idCard.length === 15) {
            birthday = "19" + idCard.substr(6, 6);
          } else if (idCard.length === 18) {
            birthday = idCard.substr(6, 8);
          }
          birthday = birthday.replace(/(.{4})(.{2})/, "$1-$2-");
        }
      }

      return birthday;
    },
    getSchoolStatus: function(status){
      var schoolStatus = ''
      if(status == 0){
        schoolStatus = '在校'
      }else{
        status == 1
        schoolStatus = '离校'
      }
      return schoolStatus
    },
    getValueType(params1 = {}) {
      var obj = {};
      for (let i = 0; i < this.tableNameForOption.length; i++) {
        var tableName = this.tableNameForOption[i];
        var columnName = this.columnName[i];
        params1.tableNameForOption = tableName;
        params1.columnName = columnName;
        var params = JSON.stringify(params1);
        obj[this.columnName[i]] = [];
        this.$post("dataCenter/selectAllValueType", {
          params,
        }).then((r) => {
          const data = r.data.valueType;
          //尝试将数组中的每一个值取出并以其为命名生成一个新的数组，最后将值存进各个新数组
          // console.log(obj, "object");
          for (var j = 0; j < data.length; j++) {
            obj[this.columnName[i]].push(data[j]);
          }
        });
        this.loading = false;
      }
      this.optionsObj = obj;
    },
  },
};
</script>
<style scoped>
.btnSearch {
  margin-top: 15px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 16px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
}
.btnSearch .el-input__inner {
  height: 32px;
  line-height: 32px;
  width: 180px;
}
/deep/ .el-form--inline .el-form-item {
  margin-bottom: 0;
}
/deep/ .el-form--label-top .el-form-item__label {
  padding-bottom: 0;
}

.demo-form-inline{
      display: flex;
    flex-wrap: wrap;
    text-align: left;
}
</style>

